<template>
  <div class="order-list-item">
    <img
      :src="`http://elm.cangdu.org/img/${item.restaurant_image_url}`"
      alt=""
    />
    <div class="right">
      <p class="title" @click="handleSkipOrderDetail">
        <span class="name">{{ item.restaurant_name }} <i></i></span>
        <span v-show="item.time_pass <= 900">等待支付</span>
        <span v-show="item.time_pass > 900">支付超时</span>
      </p>
      <p class="date" @click="handleSkipOrderDetail">{{ item.formatted_created_at }}</p>
      <p class="desc" @click="handleSkipOrderDetail">
        <span class="left">
          <span>{{ item.basket.group[0][0].name }}</span>
          <span v-if="!(item.total_quantity <= 1)"
            >等 <i>{{ item.total_quantity }}</i> 件商品</span
          >
        </span>
        <span class="price">¥{{ item.total_amount }}</span>
      </p>
      <p class="payment">
        <span v-show="item.time_pass <= 900" @click="handlePayment">
          <i>去支付</i>
          <count-down :itemPass="item.time_pass" />
        </span>
        <span v-show="item.time_pass > 900" @click="handleSkipShop"
          >再来一单</span
        >
      </p>
    </div>
  </div>
</template>

<script>
import CountDown from "components/common/countDown/CountDown";

import { mapGetters } from "vuex";
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters(["geohash"]),
  },
  methods: {
    handlePayment() {
      this.$toast.handleTipsText("暂不开放支付接口");
    },
    handleSkipShop() {
      this.$router.push({
        path: "/shop",
        query: {
          geohash: this.geohash,
          id: this.item.restaurant_id,
        },
      });
    },
    handleSkipOrderDetail() {
      this.$router.push('/order/orderDetail')
      this.$bus.$emit('handleSkipOrderDetail',this.index)
    }
  },
  components: {
    CountDown,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.order-list-item {
  display: flex;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  font-size: 15px;
  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .right {
    flex: 1;
    p {
      .set-flex();
    }
    .title {
      margin-top: 5px;
      color: #333333;
      .name {
        font-size: 17px;
        i {
          .right-arrow();
          top: -3px;
          right: 5px;
        }
      }
    }
    .date {
      padding: 5px 0;
      border-bottom: 1px solid #e9e8e8;
      font-size: 10px;
      color: #9999a6;
    }
    .desc {
      padding: 12px 0;
      border-bottom: 1px solid #e9e8e8;
      margin-bottom: 10px;
      .price {
        font-weight: 900;
        color: #ff6600;
      }
    }
    .payment {
      float: right;
      span {
        padding: 4px;
        border: 1px solid;
        border-radius: 5px;
        font-size: 13px;
      }
      & span:nth-child(1) {
        border-color: #ffc55c;
        color: #ffa500;
      }
      & span:nth-child(2) {
        border-color: #3190e8;
        color: #3190e8;
      }
    }
  }
}
</style>